<?php defined('IN_IA') or exit('Access Denied');?><?php (!empty($this) && $this instanceof WeModuleSite || 1) ? (include $this->template('header', TEMPLATE_INCLUDEPATH)) : (include template('header', TEMPLATE_INCLUDEPATH));?>
<script type="text/javascript">
    var appid = <?php  echo $appid;?>;
    var appinfo = <?php  echo json_encode($app);?>
</script>
<section class="container mt20">
    <ol class="breadcrumb">
        <li><a href="index.php?c=home&a=welcome&do=ext&m=zht_app"><i class="fa fa-home"></i> 场景应用</a></li>
        <li><a href="<?php  echo $this->createWebUrl('myapp')?>"> 我的APP</a></li>
        <li class="active">应用工厂</li>
    </ol>
    <div class="g-in clearfix">
        <div class="g-sd">
            <button type="button" onclick="addPage()" class="btn btn-success btn-block mt20">
                <i class="glyphicon glyphicon-plus"></i> 添加页面
            </button>
            <ul class="list-unstyled u-pages-thumb mt20" id="pages-thumb">
<?php  $key = 1;?>
<?php  if(is_array($pagelist)) { foreach($pagelist as $page) { ?>
                <li data-id="<?php  echo $page['pid'];?>" data-effect="<?php  echo $page['effect'];?>" data-background="<?php  echo $page['background'];?>" data-content="<?php  echo $page['content'];?>" class="current">
                    <span class="label label-info"><?php  echo $key++;?></span>
                    <a onClick="saveAndModifyPage(this,true)" href="javascript:void(0);">
                        <?php  if($page['background']) { ?>
                            <div style="background:url(<?php  echo tomedia($page['background'])?>); width:93px;height:150px;background-size: 100%"></div>
                        <?php  } else if($app['bgcolor'] || $app['bgimage']) { ?>
                            <div style="background:<?php  echo $app['bgcolor'];?> url(<?php  echo $app['bgimage'];?>); width:93px;height:150px;background-size: 100%"></div>
                        <?php  } else { ?>
                            <div style="background:#3f3f3f; width:93px;height:150px;"></div>
                        <?php  } ?>
                    </a>
                    <button type="button"  onClick="thumbPageDel(this)" class="btn btn-default btn-xs delPage">删除</button>
                    <button type="button" onClick="thumbPageMoveUp(this)" class="btn btn-default btn-xs moveUp">上移</button>
                    <button type="button"  onClick="thumbPageMoveDown(this)" class="btn btn-default btn-xs moveDown">下移</button>
                </li>
<?php  } } ?>
            </ul>
        </div>
        <div class="g-mn">
            <div class="g-mnc clearfix">
                <div class="m-tools col-xs-12">
                    <span class="text-success">页面元素:</span>
                    <a href="javascript:void(0);" onClick="addText('')"><i class="glyphicon glyphicon-text-width"></i> 文字</a>
                    <a href="javascript:void(0);" onClick="addImage('')"><i class="glyphicon glyphicon-picture"></i> 图片</a>
                    <a href="javascript:void(0);" onClick="addVideo('')"><i class="glyphicon glyphicon-film"></i> 视频</a>
                    <a href="javascript:void(0);" onClick="addAudio('')"><i class="glyphicon glyphicon-headphones"></i>音乐</a>
                    <a href="javascript:void(0);" onClick="addMap('')"><i class="glyphicon glyphicon-map-marker"></i> 地图</a>
                    <a href="javascript:void(0);" onClick="addButton('')"><i class="glyphicon glyphicon-hand-up"></i> 按钮</a>
                    <a href="javascript:void(0);" onClick="addSlide('')"><i class="glyphicon glyphicon-transfer"></i> 图文切换</a>
                    <a href="javascript:void(0);" onClick="addGallery('')"><i class="glyphicon glyphicon-th-large"></i> 多图文展示</a>
                    <a href="javascript:void(0);" onClick="addSequence('')"><i class="glyphicon glyphicon-road"></i> 图片轮播</a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#pluginModal"><i class="glyphicon glyphicon-th-list"></i>更多</a>
                </div>
                <div class="pull-left">
                    <div class="simulator m-simulator">
                        <div class="header">
                            <img src="<?php echo MODULE_URL;?>static/media/images/simulator_header.jpg" width="100%">
                        </div>
                        <iframe id="simulatorFrame" name="simulatorFrame" src="<?php echo MODULE_URL;?>static/pages/simulator.html"></iframe>
                    </div>
                    <div class="mt20 row text-center">
                        <button type="button" id="previewAll" onClick="previewAll()" class="btn btn-success">
                        <span class="glyphicon glyphicon-search"></span> 预览本页</button>
                        <button type="button" onClick="savePage()" class="btn btn-primary">
                        <span class="glyphicon glyphicon-floppy-disk"></span> 保存本页 </button>
                    </div>
                </div> 
                <div class="m-fun pull-left">
                    <div class="btn-group u-preview">
                        <a href="./../app/index.php?i=<?php  echo $_W['uniacid'];?>&c=entry&appid=<?php  echo $app['id'];?>&do=preview&m=zht_app" target="_blank" class="btn btn-sm btn-default"><i class="glyphicon glyphicon-play"></i> 预览</a>
                        <!-- <a href="javascript:void(0);" onclick="appPublish(<?php  echo $appid;?>,false)" class="btn btn-sm btn-default"><i class="glyphicon glyphicon-send"></i> 发布</a> -->
                    </div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#elementInfo" role="tab" data-toggle="tab">当页元素</a></li>
                        <li><a href="<?php  echo $this->createWebUrl('factory', array('op'=>'editapp','appid'=>$app['id']))?>">应用信息</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content" id="appInfoTab">
                        <div class="tab-pane active" id="elementInfo">
                            <div class="panel-group mt10" id="itemContainer" role="tablist" aria-multiselectable="true"></div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">页面背景</h3>
                                </div>
                                <div class="panel-body">
                                    <form class="form-horizontal mt10" role="form">
                                        <div class="form-group form-group-sm">
                                            <div class="col-sm-2 control-label" for="appname">特效：</div>
                                            <div class="col-sm-10">
                                                <select name="index_effect" id="pageEffect" class="form-control">
                                                    <option value="">无</option>
                                                    <option value="meteorshower">流星雨</option>
                                                    <option value="cloudfloat" selected="selected">飘浮云</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group imageSelect">
                                            <div class="col-sm-2 control-label" for="index_imgurl">背景：</div>
                                            <div class="col-sm-10">
                                                <div class="input-group input-group-sm">
                                                    <input type="text" id="pageBgUrl" class="form-control ImgUrl" url="<?php  echo $app['index_imgurl'];?>" placeholder="640*1030">
                                                    <span class="input-group-btn">
                                                        <input type="button" class="btn btn-default ImgSelectBtn" value="选择文件">
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt10 clearfix text-right">
                                            <button type="button" onclick="previewForm(this)" class="btn btn-success btn-xs">
                                            <span class="glyphicon glyphicon-search"></span> 预   览</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="pageInfo"></div>
                    </div>
                </div>
            </div>
        </div>
</section>
<!--插件弹出框-->
<div class="modal fade" id="pluginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="pluginModalLabel">插件列表</h4>
            </div>
            <div class="modal-body"> ... </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 关 闭 </button>
                <button type="button" class="btn btn-primary"> 插 入 </button>
            </div>
        </div>
    </div>
</div>
<!--地图坐标选取框-->
<div class="modal fade" id="modalMap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="modalMapLabel">选取地址坐标</h4>
            </div>
            <div class="modal-body">
                <div class="row ">
                    <label for="address" class="col-sm-3">详细地址：</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm" id="address" name="address">
                            <span class="input-group-btn">
              <button class="btn btn-default btn-sm" type="button" id="searchMapByAddress" onclick="bmap.searchMapByAddress($('#address').val())">搜索</button>
              </span> </div>
                    </div>
                </div>
                <div class="row mt10">
                    <label for="lng" class="col-sm-3">坐 标：</label>
                    <div class="col-sm-4">
                        <input name="lng" id="lng" value="" class="form-control input-sm" type="text" placeholder="经度">
                    </div>
                    <div class="col-sm-1">-</div>
                    <div class="col-sm-4">
                        <input id="lat" name="lat" value="" class="form-control input-sm" type="text" placeholder="纬度">
                    </div>
                </div>
                <div id="baidumap" class="mt20" style="height:400px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 关 闭 </button>
                <button type="button" onClick="getPosition()" class="btn btn-primary" data-dismiss="modal"> 选取坐标 </button>
            </div>
        </div>
    </div>
</div>
<!--信息提示面板-->
<div id="tippanel"></div>
<script type="text/javascript">
    function showImageDialog(elm) {
        require(["util"], function(util){
            var btn = $(elm);
            var ipt = btn.parents('.imageSelect:first').find('.ImgUrl');
            var val = ipt.val();
            var img = ipt.parent().next().children();
            util.image(val, function(url){
                if(url.url){
                    if(img.length > 0){
                        img.get(0).src = url.url;
                    }
                    ipt.val(url.filename);
                    ipt.attr("filename",url.filename);
                    ipt.attr("url",url.url);
                }
                if(url.media_id){
                    if(img.length > 0){
                        img.get(0).src = "";
                    }
                    ipt.val(url.media_id);
                }
            });
        });
    }
</script>
<script type="text/javascript" src="<?php echo MODULE_URL;?>static/js/function.js"></script>
<script type="text/javascript" src="<?php echo MODULE_URL;?>static/js/ajax_csrf.js"></script>
<link href="<?php echo MODULE_URL;?>static/css/ion.rangeSlider.css" rel="stylesheet" type="text/css">
<script src="<?php echo MODULE_URL;?>static/js/ion.rangeSlider.min.js"></script>
<script src="<?php echo MODULE_URL;?>static/js/jscolor.js"></script>
<script src="http://api.map.baidu.com/api?v=1.4"></script>
<script src="<?php echo MODULE_URL;?>static/js/baidu.map.js"></script>
<script src="<?php echo MODULE_URL;?>static/js/factory.js"></script>
<?php (!empty($this) && $this instanceof WeModuleSite || 1) ? (include $this->template('common/footer-base', TEMPLATE_INCLUDEPATH)) : (include template('common/footer-base', TEMPLATE_INCLUDEPATH));?>
